<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="table_Data"
      tooltip-effect="dark"
      style="width: 100%"
      border
      stripe
      v-loading="loading_table"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-table-column
        v-if="table_config.checkbox"
        type="selection"
        width="55"
        align="center"
      >
      </el-table-column>
      <template v-for="item in this.table_config.thead">
        <!-- 回调 -->
        <el-table-column
          v-if="item.type === 'function'"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-html="item.callback && item.callback(scope.row, item.prop)"
            ></span>
          </template>
        </el-table-column>
        <!-- 插槽 -->
        <el-table-column
          v-else-if="item.type === 'slot'"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
          <template slot-scope="scope">
            <slot :name="item.slotName" :data="scope.row"></slot
          ></template>
        </el-table-column>
        <!-- 纯文本渲染 -->
        <el-table-column
          v-else
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  import { GetTableData } from "../../api/common"
  export default {
    name: "TableComponent",
    props: {
      config: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        table_Data: [],
        loading_table: true,
        // 数据初始化
        table_config: {
          thead: [],
          checkbox: true,
        },
      }
    },
    methods: {
      // 初始化数据
      initConfig() {
        // 替换数据,循环,如果table_config键值有config的值,替换值
        for (let key in this.config) {
          if (Object.keys(this.table_config).includes(key)) {
            this.table_config[key] = this.config[key]
          }
        }
      },
    },
    beforeMount() {},
    watch: {
      // 传过来的数据监听
      config: {
        handler(newValue) {
          this.initConfig()
        },
        immediate: true,
      },
    },
  }
</script>
<style lang='scss'></style>